<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js传参多图切换</title>
    <style>
        p,ul,h3{ margin:0; padding:0; }
        em { font-style:normal; }
        strong{ font-weight: normal}
        li { list-style:none; }
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        .box{ width: 572px;border: 1px solid #333;margin: 30px auto; padding: 0px 2px; background-color:#dddddc; padding: 2px; border: 1px solid #bcbcbb;}
        #list li{ width: 90px;height: 50px; border: 1px solid #bfbfbe;position: relative; cursor: pointer;}
        #list li img{ position: absolute; top:5px ; left:33px; }
        #list li p{ color: #313130; font-size: 12px; position: absolute; top:32px ; left:18px;}
        #list .active{ background: #fff;}
        .warp{float: left; width: 478px; height: 208px; position: relative}
        .nav{float: left}
        .warp img{ width: 478px; height: 208px; }
        #list_1{ position: absolute; bottom: 0px;left: 0px; width: 478px;}
        #list_1 li{ margin-right: 1px; height: 20px; background: rgba(0,0,0,0.25); float: left;line-height: 20px; color: #fff; text-align: center;font-size: 12px; cursor: pointer;}
    </style>
    <script>
        window.onload=function(){
            var zrArr=["最热1","最热2","最热3","最热4"];
            var imgArr=["img/mv/1.jpg","img/mv/2.jpg","img/mv/3.jpg","img/mv/4.jpg"];
            var scArr=["商城1","商城2","商城3"];
            var imgArr1=["img/mv/2.jpg","img/mv/3.jpg","img/mv/4.jpg"];
            var ppArr=["品牌1","品牌2","品牌3","品牌4","品牌5"];
            var imgArr2=["img/mv/7.jpg","img/mv/2.jpg","img/mv/3.jpg","img/mv/4.jpg","img/mv/6.jpg",];
            var bfArr=["缤纷1","缤纷2","缤纷3","缤纷4"];
            var imgArr3=["img/mv/4.jpg","img/mv/5.jpg","img/mv/6.jpg","img/mv/7.jpg"];
            var oUl=document.getElementById("list");
            var oLi=oUl.getElementsByTagName("li");
            var oDiv=document.getElementById("warp");
            var oImg=oDiv.getElementsByTagName("img")[0];
            var oUl_1=document.getElementById("list_1");
            var oLi_1=oUl_1.getElementsByTagName("li");
            oLi[0].className="active";
            oImg.src=imgArr[0];
            initLi(zrArr,imgArr);
            oLi_1[0].style.background="#ed3754";
            var thanLi=oLi_1[0];
            function initLi(arr,arr2){
                var temp="";
                for(var i=0;i<arr.length;i++){
                    temp+=" <li>"+arr[i]+"</li>";
                }
                oUl_1.innerHTML=temp;
                for(var i=0;i<oLi_1.length;i++){
                    oLi_1[i].style.width=(478/oLi_1.length)-1+"px";
                    oLi_1[oLi_1.length-1].style.marginRight="0px";
                    oLi_1[i].index=i;
                    oLi_1[i].onclick=function(){
                        thanLi.style.background="rgba(0,0,0,0.25)";
                        oImg.src=arr2[this.index];
                        this.style.background="#ed3754";
                        thanLi=this;
                    }
                }
            }
            var than=oLi[0];
            for(var i=0;i<oLi.length;i++){
                oLi[i].index=i;
                oLi[i].onclick=function(){
                    than.className="";
                    this.className="active";
                    than=this;
                    if(this.index==0){
                        initLi(zrArr,imgArr);
                        oImg.src=imgArr[0];
                    }else if(this.index==1){
                        initLi(scArr,imgArr1);
                        oImg.src=imgArr1[0];
                    }else if(this.index==2){
                        initLi(ppArr,imgArr2);
                        oImg.src=imgArr2[0];
                    }else{
                        initLi(bfArr,imgArr3);
                        oImg.src=imgArr3[0];
                    }
                    oLi_1[0].style.background="#ed3754";
                    thanLi=oLi_1[0];
                }

            }
        }
    </script>
</head>
<body>
<div class="box clear">
    <div class="nav">
        <ul id="list">
            <li class="active">
                <img src="img/cc/1.jpg"/>
                <p> 最热团购</p>
            </li>
            <li>
                <img src="img/cc/2.jpg"/>
                <p>商城特惠</p>
            </li>
            <li>
                <img src="img/cc/3.jpg"/>
                <p>名牌推荐</p>
            </li>
            <li>
                <img src="img/cc/4.jpg"/>
                <p>缤纷活动</p>
            </li>
        </ul>
    </div>
    <div class="warp clear" id="warp">
        <img />
        <ul id="list_1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

</body>
</html>